import React, { useEffect, useState } from 'react';
import'./Promoted.scss'
import { Button ,Table,Drawer,Form,Input ,Select,message } from 'antd';
import {useNavigate} from 'react-router-dom'
import {useDispatch} from 'react-redux'
import * as service from '../../../api/promoted'
import type { ColumnsType } from 'antd/es/table';
interface Props{
 
}
interface DataType {
    id: number;
    name: string;
    department: string;
    post: string;
    iphone: string;
    role: string;
    job_no: string;
    certificate: string;
    time: string;
    promoted1:string,
    trial:string
  }
function Promoted(props:Props) {

    const { Option } = Select;
    let dispatch = useDispatch()
    let [from] = Form.useForm()
    let [tableData,setTableData] = useState<DataType[]>([])
    let navigate = useNavigate()
    //控制抽屉的显示隐藏
    const [open, setOpen] = useState(false);
    //抽屉关闭时出发
    const onClose = () => {
        setOpen(false);
        from.setFieldsValue({name:'',iphone:'',job_no:'',certificate:'',role:'',department:"",post:'',time:'',promoted1:'',trial:''})
    };
    //验证通过是触发
    const onFinish = async(values: any) => {
            //发送新增请求
            let res = await service.peomoted_add(values)
            message.success({content:'新增成功'})
            table()
            setOpen(false)
    };
    //验证失败时触发
    const onFinishFailed = (errorInfo: any) => {
        console.log(errorInfo)
    };
    //表格数据结构
    const columns: ColumnsType<DataType> = [
        {
          title: '序号',
          key: 'id',
          render: (_,record,) => <span>{tableData.indexOf(record)+1}</span>,
        },
        {
          title: '姓名',
          key: 'name',
          render: (_,record,) => <span>{record.name}</span>,
        },
        {
          title: '部门',
          key: 'department',
          render: (_,record,) => <span>{record.department}</span>,
        },
        {
          title: '岗位',
          key: 'post',
          render: (_,record,) => <span>{record.post}</span>,
        },
        {
          title: '手机号',
          key: 'iphone',
          render: (_,record,) => <span>{record.iphone}</span>,
        },
        {
          title: '工号',
          key: 'job_no',
          render: (_,record,) => <span>{record.job_no}</span>,
        },
        {
          title: '证件号',
          key: 'certificate',
          render: (_,record,) => <span>{record.certificate}</span>,
        },
        {
          title: '工作性质',
          key: 'role',
          render: (_,record,) => <span>{record.role}</span>,
        },
        {
          title: '入职日期',
          key: 'time',
          render: (_,record,) => <span>{record.time}</span>,
        },
        {
          title: '转正日期',
          key: 'promoted1',
          render: (_,record,) => <span>{record.promoted1 }</span>,
        },
        {
          title: '试用期',
          key: 'trial',
          render: (_,record,) => <span>{record.trial }</span>,
        },
        {
          title: '操作',
          key: 'time',
          render: (_,record,) =><button style={{color:'blue',border:"1px solid blue",backgroundColor:'#fff',padding:'5px 10px',borderRadius:'10px',cursor: "pointer"}} onClick={()=>{zhuanzheng(record)}}>转正</button>
        },

    ]

    //表格数据
    let table = async()=>{
        let res = await service.promoted_list()
        setTableData(res.data.data)
    }

    //挂载
    useEffect(()=>{
        table()
    },[])

    //转正按钮
    let zhuanzheng=(item:any)=>{
        navigate('/index/promotedSon')
        dispatch({type:"SAVE_id",payload:item})
    }
    return (
        <div className='promoted'>
            <h2>转正管理</h2>
            <div className="top">
            <Drawer title="新增数据" placement="right" onClose={onClose} open={open}>
            <Form
                form={from}
                name="basic"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                style={{ maxWidth: 400 }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <Form.Item
                label="姓名"
                name="name"
                rules={[{ required: true, message: 'Please input your username!' }]}
                >
                <Input />
                </Form.Item>

                <Form.Item
                label="手机"
                name="iphone"
                rules={[{ required: true, message: 'Please input your password!' }]}
                >
                <Input />
                </Form.Item>

                <Form.Item
                label="工号"
                name="job_no"
                rules={[{ required: true, message: 'Please input your password!' }]}
                >
                <Input />
                </Form.Item>

                <Form.Item
                label="证件"
                name="certificate"
                rules={[{ required: true, message: 'Please input your password!' }]}
                >
                <Input />
                </Form.Item>

                <Form.Item
                label="性质"
                name="role"
                rules={[{ required: true, message: 'Please input your password!' }]}
                >
                <Input />
                </Form.Item>

                <Form.Item
                label="入职日期"
                name="time"
                rules={[{ required: true, message: 'Please input your password!' }]}
                >
                <Input />
                </Form.Item>

                <Form.Item
                label="转正日期"
                name="promoted1"
                rules={[{ required: true, message: 'Please input your password!' }]}
                >
                <Input />
                </Form.Item>

                <Form.Item
                label="试用期"
                name="trial"
                rules={[{ required: true, message: 'Please input your password!' }]}
                >
                <Input />
                </Form.Item>

                <Form.Item
                label="部门"
                name="department"
                rules={[{ required: true, message: 'Please input your password!' }]}
                >
                <Select defaultValue="请选择部门" style={{width:'200px'}}>
                    <Option value="项目部">项目部</Option>
                    <Option value="销售部">销售部</Option>
                    <Option value="产品部">产品部</Option>
                </Select>
                </Form.Item>

                <Form.Item
                label="岗位"
                name="post"
                rules={[{ required: true, message: 'Please input your password!' }]}
                >
                <Select defaultValue="请选择你的岗位" style={{width:'200px'}}>
                    <Option value="项目经理">项目经理</Option>
                    <Option value="销售员">销售员</Option>
                    <Option value="项目员">项目员</Option>
                    <Option value="销售经理">销售经理</Option>
                </Select>
                </Form.Item>

                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                <Button type="primary" htmlType="submit">
                    提交
                </Button>
                </Form.Item>
            </Form>
            </Drawer>
            </div>
            <Table columns={columns} dataSource={tableData} rowKey={"id"}/>
        </div>
    );
}

export default Promoted;   